import React from 'react';
import {connect} from 'react-redux';
import HeadNavComponent from "../../../components/headNav";
import {safeAuto,GoPagePush} from "../../../assets/js/utils";
import { Modal,Toast} from 'antd-mobile';
import request from '../../../assets/js/utils/request';
import  Css from '../../../assets/css/home/address/index.css';
class addressComponent extends React.Component{
    constructor(props){
        super(props);
        safeAuto(props);
        this.state={
            aAddress:[]
        }
    }
    goPage(url){
        GoPagePush(this.props,url)
    }
    componentDidMount(){
        this.getAddressData();
    }
    //删除地址弹窗
    deleteAddress(e,index,aid){
        e.stopPropagation()
        Modal.alert('确定要删除吗？', '', [
            { text: '取消', onPress: () => console.log('cancel') },
            { text: '确定', onPress: () =>{
                    //删除地址
                    let sUrl=window.base.config.baseUrl+'user/address/del?uid='+this.props.state.redLogin.uid+'&aid='+aid+'&token='+window.base.config.token;
                    request(sUrl,'get').then((res)=>{
                        let temAddress=this.state.aAddress;
                        temAddress.splice(index,1);
                        this.setState({aAddress:temAddress});
                        Toast.info(res.data,2)
                        if (aid === sessionStorage['aid']){
                            sessionStorage.removeItem("aid");
                        }
                        if (aid === localStorage['aid']){
                            localStorage.removeItem("aid");
                        }
                    })
                }
            },

        ]);
    }
    //获取收获地址数据
    getAddressData(){
        let sUrl=window.base.config.baseUrl+'/user/address/index?uid='+this.props.state.redLogin.uid+'&token='+window.base.config.token;
        request(sUrl,'get').then((res)=>{
            if (res.code===200){
                this.setState({aAddress:res.data})
            }
        })
    }
    //选择收货地址
    seleAddress(aid){
        sessionStorage['aid']=aid;
        GoPagePush(this.props,'balance/index')
    }
    //修改收获地址
    modAddress(e,index,aid){
        e.stopPropagation();
        this.props.history.push('mod/index?aid='+aid)
    }
    componentWillUnmount(){
        this.setState = (state, callback) => {
            return;
        };
    }
    render(){
        return(
            <div className={Css['main']}>
                <HeadNavComponent title={'选择收货地址'} ></HeadNavComponent>
                <div className={Css['address_title']}>
                    <div className={Css['address_title_l']}>配送地址</div>
                    <div className={Css['address_title_r']} onClick={this.goPage.bind(this,'address/add')}>添加收获地址</div>
                </div>
                <div className={Css['address_list']}>
                    <ul>
                        {
                            this.state.aAddress.length>0?
                                this.state.aAddress.map((item,index)=>{
                                    return(
                                        <li key={index} onClick={this.seleAddress.bind(this,item.aid)}>
                                            <div className={Css['address_list_font']}>
                                                {item.isdefault==='1'?<div className={Css['address_list_font_l']}><i className={'selectedIcn'}></i></div>:''}
                                                <div className={Css['address_list_font_r']}>
                                                    <div className={Css['address_list_font_cont']}>
                                                        <span>{item.name}</span><span>{item.cellphone}</span>
                                                    </div>
                                                    <div className={Css['address_list_font_area']}>
                                                        {item.isdefault==='1'?<i>默认</i>:''}
                                                        <span className={'ovflOne'}>{item.province}{item.city}{item.address}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className={Css['address_list_edit']}>
                                                <i className={'editIcn'} onClick={(e)=>{this.modAddress(e,index,item.aid)}}></i>
                                                <i className={'garbage'} onClick={(e)=>{this.deleteAddress(e,index,item.aid)}} ></i>
                                            </div>
                                        </li>
                                    )
                                })
                                :"请添加地址"
                        }
                    </ul>
                </div>

            </div>
        )
    }
}
export default connect((state)=>{
    return{
        state:state
    }
})(addressComponent)